<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- head 头部-->
<head th:replace="admin/layout/include::head('栏目分类管理','')"></head>
<body style="padding-left: 20px;">
<form id="data-form" lay-filter="data-form" class="layui-form model-form">

    <!-- 栏目分类  -->
    <div class="layui-card" style="height: 700px;">
        <div class="layui-card-header" style="border-bottom-color:#1E9FFF;">
            <em>栏目分类</em>
        </div>
        <div class="layui-card-body">
            <div class="layui-row layui-col-space20">
                <div class="layui-col-md6">
                    <table class="layui-table" id="catalogType-data-table" lay-filter="catalogType-data-table"></table>
                </div>
                <div class="layui-col-md6">
                    <input name="catalogId" type="hidden"/>
                    <input name="ctId" type="hidden"/>
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                            <input name="ctName" placeholder="" type="text" class="layui-input"
                                   lay-verify="required" required/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input name="orderNo" placeholder="排序" type="number" class="layui-input"
                                   lay-verify="number"/>
                        </div>
                    </div>
                    <div class="layui-form-item text-right">
                        <button class="layui-btn" lay-filter="formAddSubmit" lay-submit>添加</button>
                        <button class="layui-btn layui-btn-normal" lay-filter="formUpdateSubmit" lay-submit>更新</button>
                        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


</form>

<!-- 表格操作列 -->
<script type="text/html" id="data-table-bar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 表格状态列 -->
<script type="text/html" id="data-table-state">
    <input type="checkbox" lay-filter="data-table-state" value="{{d.ctId}}" lay-skin="switch" lay-text="正常|禁用"
           {{d.state==0?'checked':''}}/>
</script>
<!-- js部分 -->
<div th:replace="admin/layout/include::js"></div>
<script>
    layui.use(['layer', 'admin','table','util', 'form','colorpicker','treeSelect'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var util = layui.util;
        var colorpicker = layui.colorpicker;
        var treeSelect = layui.treeSelect;

        var catalogId = admin.getTempData("catalogId");
        if(catalogId){
            $('[name=catalogId]').val(catalogId);
            //渲染表格
            table.render({
                elem: '#catalogType-data-table',
                url: '/admin/catalogType/',
                where:{'catalogId':catalogId},
                page : true,
                loading : true,
                height : 'full-200',
                limit : 10,
                limits : [ 10, 20, 50, 100 ],
                response:{
                    countName: 'total'
                },
                cols: [
                    [
                    {type: 'numbers'},
                    {field: 'ctName',width:220, title: '分类名'},
                    {field: 'orderNo',width:80,sort:true, title: '排序'},
                    {field: 'state', width:100,title: '状态',templet: '#data-table-state'},
                    {
                        field: 'createTime',width:160, sort: true, templet: function (d) {
                            return util.toDateString(d.createTime);
                        }, title: '创建时间'
                    },
                    {align: 'center', toolbar: '#data-table-bar', title: '操作'}
                ]
                ]
            });
            //单击更新
            table.on('row(catalogType-data-table)', function(obj){
                form.val('data-form',obj.data);
            });
            // 工具条点击事件
            table.on('tool(catalogType-data-table)', function (obj) {
                var data = obj.data;
                 if (obj.event === 'del') { //删除
                    B.doDelete("/admin/catalogType/"+data.ctId,obj);
                }
            });
            // 表单提交事件
            form.on('submit(formAddSubmit)', function (data) {
                //如果是添加
                data.field.ctId='';
                save(data);
                return false;
            });
            // 表单提交事件
            form.on('submit(formUpdateSubmit)', function (data) {
                //如果是添加
                if($('[name=ctId]').val()==''){
                    top.layer.msg('请选择具体的分类。', {icon: 2});
                    return false;
                }
                save(data);
                return false;
            });
            var save=function(data){
                data.field.state = '0';
                B.post({
                    url: '/admin/catalogType/',
                    loading: true,
                    data: data.field,
                    success: function (data) {
                        if (data.success) {
                            top.layer.msg(data.msg, {icon: 1});
                            //清空表单
                            $('[name=ctId]').val('');
                            $('[name=ctName]').val('');
                            $('[name=orderNo]').val('');
                            table.reload('catalogType-data-table');

                            // 关闭当前iframe弹出层
                            //parent.layer.close(parent.layer.getFrameIndex(window.name));
                        } else {
                            top.layer.msg(data.msg, {icon: 2});
                        }
                    }
                });
            }
        }


    });
</script>

</body>